<template>
	<div>
		<el-dialog v-model="showDialog" title="选择商品" width="800px" draggable>
			<div>
				<el-form label-width="80px">
					<el-form-item label="商品分类:">
						<el-cascader
							filterable
							@change="changeType()"
							v-model="typeList"
							:props="codes"
							placeholder="请选择商品分类"
							:options="goodsTypeList"
							style="width: 100%"
						/>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="goodsLists" style="width: 100%" height="400" border>
				<el-table-column fixed prop="name" label="商品名称" />
				<el-table-column label="操作" prop="addtime" width="100" fixed="right">
					<template #default="{ row }">
						<el-button @click="setGoods(row)" type="primary">选 择</el-button>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showDialog = false">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import _ from "lodash";
import { ref, computed, reactive, watch, toRaw, onMounted } from "vue";
import { goodsListCate, goodsList } from "@/api/modules/goods";

const emit = defineEmits(["update:showDialog", "getGoods"]);

const props = defineProps({
	showDialog: {
		required: true,
		type: Boolean
	}
});
const showDialog = computed({
	get() {
		return props.showDialog;
	},

	set(value) {
		emit("update:showDialog", value);
	}
});
watch(showDialog, () => {
	if (showDialog.value) {
		typeList.value = [];
		goodsLists.value = [];
	}
});
const codes = {
	label: "name",
	value: "id",
	children: "children"
};
const typeList = ref();
const goodsTypeList = ref();
const goodsLists = ref();

const changeType = () => {
	//获取商品
	goodsList({
		cate: typeList.value[typeList.value.length - 1],
		limit: 1000
	}).then((res: any) => {
		goodsLists.value = res.data.list;
	});
};
onMounted(() => {
	//获取商品分类
	goodsListCate({
		page: 1,
		limit: 1000
	}).then((res: any) => {
		goodsTypeList.value = res.data.list;
	});
});

//选中商品
const setGoods = (row: any) => {
	let obj = {
		cate1_ids: typeList.value.toString(),
		cate2_id: row.id,
		name: row.name,
		title: row.name,
		amount: 0,
		num: 1
	};
	emit("getGoods", obj);
	showDialog.value = false;
};
</script>

<style lang="less" scoped></style>
